<template>
	<view class="father">

		<view class="gg">

			<view class="bt1">
				<view class="bt1_t1" style="font-weight: bold;">{{shopName}}门店账单信息</view>

		<!-- 		<button class="yjq">已结清</button>
				<button class="wjq">未结清</button> -->
			</view>
			
			<view class="bt2" >
				<uni-collapse ref="collapse" v-model="value">
					<uni-collapse-item title="门店账单相关信息">
						<view class="content">
							<view class="bt2">
								<view class="bt2_t1">累积消费 : {{sum}}元/年</view>
								<view class="bt2_t2">已结清金额 : {{realpay}}元</view>
								<view class="bt2_t3">欠款 : {{qk}}元</view>
							</view>
						</view>
					</uni-collapse-item>
				</uni-collapse>
			</view>

		</view>

		<view class="bt3" v-if="shops.length >0">
			<scroll-view scroll-y="true" class="bt3_button">
				<view v-for="item in shops" class="b2">
					<view class="b2_1">
						<view>订单编号:&nbsp;{{item.id}}</view>
						<view>商品:&nbsp;&nbsp;{{item.shopName}}</view>
					</view>
					<view class="b2_2">
						<view>订单创建时间{{ formattedTime(item.createtime) }}</view>
						<view class="ss" v-if="item.state==1">
							<text style="font-size: 26rpx; ">已结清</text>
						</view>
						<view class="ee" v-else>
							<text style="font-size: 26rpx;">&nbsp;剩余&nbsp;{{item.realpay}}&nbsp;待结清</text>
						</view>
					</view>
				</view>
			</scroll-view>
			<view style="width: 200%;height: calc(100rpx + env(safe-area-inset-bottom)/2);"></view>
		</view>
		<view v-else style=" height: 100vh; display: flex; justify-content: center; align-items: center;">
			该门店暂无订单
		</view>

	</view>
	<view>
		<tab-bar selectedIndex="1"></tab-bar>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from "vue"
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import tabBar from "../../../components/tabBar/tabBar.vue";
	import {
		http
	} from '/until/request.js'

	const shops = ref([])
	//欠款金额
	const qk = ref();
	//实际支付金额
	const realpay = ref();
	//总盈利金额
	const sum = ref();

	// onMounted(() => {
	// 	chaxun();
	// });
	

	const chaxun = async () => {

		const res = await http({
			url: '/orders/selectuserorder/' + shopName.value,
			method: 'get'
		})
		console.log("点击某个商家查询具体的门店账单")
		console.log(res.data)
		
		qk.value = res.data.qiankuan;
		realpay.value = res.data.realpay;
		sum.value = res.data.sum;
		shops.value = res.data.orders;

	}


	// 格式化时间
	const formattedTime = (createTime) => {
		if (!createTime) return '';
		const date = new Date(createTime);
		const year = date.getFullYear();
		const month = String(date.getMonth() + 1).padStart(2, '0');
		const day = String(date.getDate()).padStart(2, '0');
		return `${year}-${month}-${day}`;
	};
	const shopName = ref("")
	
	// 在 onMounted 生命周期钩子中接收参数
	onMounted(() => {
		const route = getCurrentPages().pop(); // 获取当前页面实例
		const options = route.options; // 获取路由参数
		if (options && options.sname) {
			// 在 Uni-app 中，可能需要从 route.options 中获取参数
			// 注意：在标准的 Vue Router 中，你应该使用 useRoute() 或 route.query 来获取参数
			// 但由于 Uni-app 可能有自己的路由实现，这里我们直接使用 route.options
			shopName.value = decodeURIComponent(options.sname);
		}
		console.log("页面接收参数")
		console.log(shopName.value)
		
		chaxun();
	});
</script>

<style lang="scss">
	.father {
		width: 100%;
		height: 100%;
		// padding-bottom:700rpx;


		// border: 1px solid red;
		.ee {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 260rpx;
			height: 50rpx;
			background: rgba(255, 0, 0, 0.3);
			color: #FF0000;
			border-radius: 15rpx;
		}

		.ss {
			display: flex;
			justify-content: center;
			align-items: center;
			// width: 260rpx; 
			// height: 50rpx;
			background: rgba(136, 217, 123, 1);
			color: #27c986;
			border-radius: 15rpx;
			width: 100rpx;
			height: 25px;
			align-items: center;
			color: white;
		}

		.gg {
			position: fixed;
			left: 0;
			right: 0;
			top: 0;
			z-index: 1;
			background-color: white;
		}

		.bt1 {
			margin-top: 20rpx;
			margin-left: 20rpx;
			width: 95%;
			height: 80rpx;
			// border: 1px solid darkblue;
			display: flex;
			align-items: center;
			background-color: #d5e3e8;

			.bt1_t1 {
				width: 80%;
				margin-left: 60rpx;
				// border: 1px solid gold;
			}

			.yjq {
				font-size: 20rpx;
				width: 120rpx;
				background: rgba(136, 217, 123, 0.3);
				color: #27c986
			}

			.wjq {
				margin-left: 20rpx;
				font-size: 20rpx;
				width: 120rpx;
				background: rgba(255, 0, 0, 0.3);
				color: #FF0000
			}
		}

		.bt2 {
			margin-top: 30rpx;
			margin-left: 25rpx;
			width: 90%;
			// height: 450rpx;
			// border: 1px solid fuchsia;
			// display: flex;
			// flex-direction: column;
			// justify-content: space-around;

			.bt2_t1 {
				display: flex;
				align-items: center;
				margin-left: 20rpx;
				margin-top: -10rpx;
				width: 90%;
				height: 90rpx;
				// border: 1px solid darkblue;
			}

			.bt2_t2 {
				margin-left: 20rpx;
				width: 90%;
				height: 90rpx;
				// border: 1px solid darkblue;
				display: flex;
				align-items: center;
				margin-top: 10rpx;
			}

			.bt2_t3 {
				margin-left: 20rpx;
				width: 90%;
				height: 90rpx;
				// border: 1px solid darkblu
				display: flex;
				align-items: center;
				margin-top: 10rpx;
			}
		}

		.bt3 {
			margin-top: 240rpx;
			// overflow-y: auto;
			// border: 1px solid red;
			z-index: -1;

			// height: 600rpx;
			.bt3_button {
				height: 70vh;
				// overflow: hidden;
			}
		}

		.b2 {
			font-size: 25rpx;
			width: 93%;
			height: 180rpx;
			border: 1px solid #56b6ec;
			margin-top: 40rpx;
			margin-left: 20rpx;
			display: flex;
			justify-content: space-between;
			box-shadow: 8px 5px 5px rgba(117, 160, 208, 0.5);
			background-color: white;

			.b2_1 {
				margin-left: 10rpx;
				// border: 1px solid darkcyan;
				display: flex;
				flex-direction: column;
				justify-content: space-around
			}

			.b2_2 {
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				align-items: center;
				// border: 1px solid darkcyan;
				margin-right: 10rpx;

				.tt {
					border: 1px solid red;
					width: 100rpx;
					height: 40rpx;
					font-size: 10rpx;
				}
			}

		}
	}
</style>